<template>
    <div v-loading="loading" :class="'wl-project-edit'+(isReadOnly?' wl-project-edit__isRead':'')" >
      <i ref="backbutton" @click="handleBack()" class="el-icon-back wl-back"> 返回</i>
      <!-- 基本配置 -->
      <div class="wl-split">基本配置</div>
      <el-form ref="basicform" :model="form" :rules="rules" :disabled="isReadOnly" label-position="top" size="small">
        <el-row type="flex" class="row-bg">
          <el-col :span="11">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <el-form-item label="环境" prop="environment_id">
              <el-select v-model="form.environment_id" placeholder="请选择环境" class="wl-form-item">
                <el-option v-for="item in environment" :key="item.id" :label="item.env_name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="11">
            <el-form-item label="Git Repo" prop="repo_url">
              <el-input v-model="form.repo_url" placeholder="请输入项目git地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <el-form-item label="分支/tag" prop="repo_mode" >
              <el-select v-model="form.repo_mode" placeholder="请选择" class="wl-form-item">
                <el-option label="branch" value="branch"></el-option>
                <el-option label="tag" value="tag"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--目标集群-->
      <div class="wl-split">目标集群</div>
      <el-form ref="serversform" :model="form" :rules="rules" :disabled="isReadOnly" label-position="top" size="small" class="wl-target-form">
        <el-transfer v-model="form.server_ids" :data="server" :titles="['服务器','目标集群']" filter-placeholder="请输入服务器名称" filterable></el-transfer>
        <el-row type="flex" class="row-bg">
          <el-col :span="8">
            <el-form-item prop="target_root">
              <label slot="label">
                <span>目标集群部署路径</span>
                <el-popover placement="top-start" trigger="hover" content="一般为webroot，不能为已存在目录，walle会自行生成">
                  <i slot="reference" class="el-icon-info" />
                </el-popover>
              </label>
              <el-input v-model="form.target_root" placeholder="一般为webroot，不能为已存在目录"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="8">
            <el-form-item prop="target_releases">
              <label slot="label">
                <span>目标集群部署仓库</span>
                <el-popover placement="top-start" trigger="hover" content="仓库存储每次发布的版本，用于储存、回滚等版本管理">
                  <i slot="reference" class="el-icon-info" />
                </el-popover>
              </label>
              <el-input v-model="form.target_releases" placeholder="仓库存储每次发布的版本"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="6">
            <el-form-item label="目标集群部署仓库版本保留数" prop="keep_version_num">
              <el-input v-model="form.keep_version_num" placeholder="版本保留数是为了做历史版本回滚"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--任务配置-->
      <div class="wl-split">任务配置</div>
      <el-form ref="taskform" :model="form" :rules="rules" :disabled="isReadOnly" label-position="top" size="small" class="wl-task-form">
        <el-row type="flex" class="row-bg">
          <el-col :span="11">
            <el-form-item prop="excludes">
              <div slot="label">
                <span>部署排除文件</span>
                <el-popover placement="top-start" trigger="hover" content="排除不需要打包同步至服务器的文件或目录。一行一个，支持正则，如：*.log">
                  <i slot="reference" class="el-icon-info" />
                </el-popover>
                <el-radio-group v-model="form.is_include" class="wl-project-edit__include">
                  <el-radio :label="0">排除</el-radio>
                  <el-radio :label="1">包含</el-radio>
                </el-radio-group>
                <span v-on:click="fullScreen(1)" class="wl-fullscreen" >全屏</span>
              </div>
              <codemirror ref="cmEditer1" :value="form.excludes" :options="cmOptions1" class="wl-codemirror"></codemirror>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="wl-project-edit__checkout">
              <i class="el-icon-setting wl-icon-gitlab" /><br /><span>环境准备</span>
            </div>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="task_vars">
              <div slot="label">
                <span>自定义全局变量</span>
                <el-popover placement="top-start" trigger="hover">
                  <div class="wl-popover">
                    <p>自定义全局变量可在高级任务中使用，一行一个，格式：VAR=value。</p>
                    <p class="var">预置变量：</p>
                    <p class="var"><span>${WORKSPACE}</span>：宿主机的独立部署空间</p>
                    <p class="var"><span>${WEBROOT}</span>：目标集群部署路径</p>
                    <p class="var"><span>${CURRENT_RELEASE}</span>：目标集群部署仓库</p>
                    <p class="var"><span>${VERSION}</span>：当前要发布目标集群部署仓库里的版本</p>
                    <p class="var"><span>${TAG}</span>：当前部署TAG</p>
                    <p class="var"><span>${BRANCH}</span>：当前部署分支</p>
                    <p class="var"><span>${COMMIT_ID}</span>：当前部署的commit_id</p>
                    <p class="var"><span>${PROJECT_NAME}</span>：当前部署的项目名称</p>
                    <p class="var"><span>${PROJECT_ID}</span>：当前部署的项目id</p>
                    <p class="var"><span>${TASK_NAME}</span>：当前部署的任务名称</p>
                    <p class="var"><span>${TASK_ID}</span>：当前部署的任务id</p>
                    <p class="var"><span>${DEPLOY_USER}</span>：当前部署的用户</p>
                    <p class="var"><span>${DEPLOY_TIME}</span>：当前部署的时间</p>
                  </div>
                  <i slot="reference" class="el-icon-info" />
                </el-popover>
                <span v-on:click="fullScreen(2)" class="wl-fullscreen">全屏</span>
              </div>
              <codemirror ref="cmEditer2" :value="form.task_vars" :options="cmOptions2" class="wl-codemirror"></codemirror>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="11">
            <el-form-item prop="prev_deploy">
              <div slot="label">
                <span>高级任务-Deploy前置任务</span>
                <el-popover placement="top-start" trigger="hover">
                  <div class="wl-popover">
                    <p>在宿主机未检出代码前的前置任务，常为安装依赖、配置环境变量等</p>
                    <p>每行Shell脚本执行时都会重新初始化执行上下文建立命令执行环境。当需要一次连续执行多行命令时，请在行尾加上“\”，如：</p>
                    <p class="shell">if [ -f "${WORKSPACE}/tmp" ]; then \</p>
                    <p class="shell indent">mkdir ${WORKSPACE}/tmp \</p>
                    <p class="shell">fi</p>
                    <p class="shell"></p>
                    <p class="shell">cd ${WORKSPACE}/tmp \</p>
                    <p class="shell">git@gitlab-cpjs.caohua.info:b_other/java.config.git</p>
                  </div>
                  <i slot="reference" class="el-icon-info" />
                </el-popover>
                <span v-on:click="fullScreen(3)" class="wl-fullscreen">全屏</span>
              </div>
              <codemirror ref="cmEditer3" :value="form.prev_deploy" :options="cmOptions3" class="wl-codemirror"></codemirror>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="wl-project-edit__checkout">
              <i class="el-icon-finished wl-icon-gitlab" /><br /><span>检出代码</span>
            </div>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="post_deploy">
              <div slot="label">
                <span>高级任务-Deploy后置任务</span>
                <el-popover placement="top-start" trigger="hover">
                  <div class="wl-popover">
                    <p>在宿主机检出代码后的后置任务，常为编译、清除文件</p>
                    <p>每行Shell脚本执行时都会重新初始化执行上下文建立命令执行环境。当需要一次连续执行多行命令时，请在行尾加上“\”，如：</p>
                    <p class="shell">${MAVEN_HOME}/bin/mvn clean install -Dmaven.test.skip=true \</p>
                    <p class="shell">if [ $? -ne 0 ]; then \</p>
                    <p class="shell indent">echo "maven package error!" \</p>
                    <p class="shell indent">exit 1 \</p>
                    <p class="shell">fi</p>
                  </div>
                  <i slot="reference" class="el-icon-info" />
                </el-popover>
                <span v-on:click="fullScreen(4)" class="wl-fullscreen">全屏</span>
              </div>
              <codemirror ref="cmEditer4" :value="form.post_deploy" :options="cmOptions4" class="wl-codemirror"></codemirror>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="11">
            <el-form-item prop="prev_release">
              <div slot="label">
                <span>高级任务-Release前置任务</span>
                <el-popover placement="top-start" trigger="hover">
                  <div class="wl-popover">
                    <p>在目标服务器同步代码到版本库后，服务切换的前置任务，常为停服、摘机器等</p>
                    <p>每行Shell脚本执行时都会重新初始化执行上下文建立命令执行环境。当需要一次连续执行多行命令时，请在行尾加上“\”，如：</p>
                    <p class="shell">if [ -f "${WEBROOT}/stop.sh" ]; then \</p>
                    <p class="shell indent">cd ${WEBROOT} \</p>
                    <p class="shell indent">./stop.sh \</p>
                    <p class="shell">fi</p>
                  </div>
                  <i slot="reference" class="el-icon-info" />
                </el-popover>
                <span v-on:click="fullScreen(5)" class="wl-fullscreen">全屏</span>
              </div>
              <codemirror ref="cmEditer5" :value="form.prev_release" :options="cmOptions5" class="wl-codemirror"></codemirror>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="wl-project-edit__checkout">
              <i class="el-icon-d-arrow-right wl-icon-gitlab" /><br /><span>版本切换</span>
            </div>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="post_release">
              <div slot="label">
                <span>高级任务-Release后置任务</span>
                <el-popover placement="top-start" trigger="hover">
                  <div class="wl-popover">
                    <p>在目标服务器新版本服务切换后的后置任务，常为启动服务、启动节点</p>
                    <p>每行Shell脚本执行时都会重新初始化执行上下文建立命令执行环境。当需要一次连续执行多行命令时，请在行尾加上“\”，如：</p>
                    <p class="shell">cd ${WEBROOT} \</p>
                    <p class="shell">dos2unix ./*.sh \</p>
                    <p class="shell">chmod +x ./*.sh \</p>
                    <p class="shell">./start.sh</p>
                  </div>
                  <i slot="reference" class="el-icon-info" />
                </el-popover>
                <span v-on:click="fullScreen(6)" class="wl-fullscreen">全屏</span>
              </div>
              <codemirror ref="cmEditer6" :value="form.post_release" :options="cmOptions6" class="wl-codemirror"></codemirror>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="notifyform" :model="form" :rules="rules" :disabled="isReadOnly" label-position="top" size="small">
        <el-row type="flex" class="row-bg">
          <el-col :span="11">
            <el-form-item label="上线通知" prop="notice_type">
              <el-select v-model="form.notice_type" placeholder="请选择" class="wl-form-item">
                <el-option v-for="item in noticeTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <el-form-item :label="noticeTypeTitle" prop="notice_hook" v-show="form.notice_type!==''">
              <el-input v-model="form.notice_hook" :placeholder="noticeTypePlaceholder"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="auditform" :model="form" :rules="rules" :disabled="isReadOnly" label-position="top" size="small">
        <el-form-item prop="task_audit">
          <el-checkbox v-model="form.task_audit" :true-label="1" :false-label="0">上线单是否开启审核</el-checkbox>
        </el-form-item>
      </el-form>
      <el-button v-if="params.flag==='create'||params.flag==='update'" @click="submitProject()" type="primary">提交</el-button>
    </div>
</template>

<script>
import { getEnvironment } from '@/api/env'
import { getServer } from '@/api/server'
import { getProject, createProject, updateProject } from '@/api/project'

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/display/fullscreen.css';
// import 'codemirror/theme/cobalt.css'
// import 'codemirror/theme/base16-light.css'
// import 'codemirror/theme/solarized.css'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/addon/display/fullscreen.js';

export default {
  name: 'EditProject',
  components: {
    codemirror
  },
  data() {
    const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/
    var checkKeepVersionNum = (rule, value, callback) => {
      if (value === '') {
        return callback()
      }
      if (!(/^[+]{0,1}(\d+)$/.test(value))) {
        return callback(new Error("请输入数字值"))
      } else if (value < 0 || value > 100) {
        return callback(new Error("请输入0~100的整数"))
      } else {
        return callback()
      }
    }
    var checkNoticeHook = (rule, value, callback) => {
      switch(this.form.notice_type) {
        case '': return callback()
        case 'dingding':
          if (!value || value.trim()=== '') {
            return callback(new Error("请输入内容"))
          }
          return callback() 
        case 'email':
          if (!value || value.trim()=== '') {
            return callback(new Error("请输入内容"))
          }
          let strs = value.split(',')
          for(let i in strs) {
            if (!regEmail.test(strs[i])) {
              return  callback(new Error('邮箱格式错误'))
            }
          }
          return callback()
      }
    }
    const cmExtraKeys = {
      'F11': function(cm) {
        cm.setOption('fullScreen', !cm.getOption('fullScreen'))
        cm.focus();
      },
      'Esc': function(cm) {
        if (cm.getOption('fullScreen')) {
          cm.setOption('fullScreen', false)
          cm.focus()
        }
      } 
    }
    return {
      loading: false,
      params: {
        flag: '',             // create,update,view
        data: {},
        context: {}           // 父页面传递过来的参加，返回时带给父页面恢复上下文
      },
      isReadOnly: false,
      project: {},
      environment: [],
      server: [],
      form: {
        name: '',             // 项目名称
        environment_id: '',   // 环境
        repo_url: '',         // Git Repo
        repo_mode: 'branch',  // 分支/tag
        server_ids: [],       // 目标集群
        target_root: '',      // 目标集群部署路径
        target_releases: '',  // 目标集群部署仓库
        keep_version_num: '',  // 目标集群部署仓库版本保留数
        excludes: '',         // 部署排除文件
        is_include: 0,        // 排除/包含
        task_vars: '',        // 自定义全局变量
        prev_deploy: '',      // 高级任务-Deploy前置任务
        post_deploy: '',      // 高级任务-Deploy后置任务
        prev_release: '',     // 高级任务-Release前置任务
        post_release: '',     // 高级任务-Release后置任务
        notice_type: '',      // 上线通知
        notice_hook: '',      // 钉钉/邮箱通知地址
        task_audit: 1,        // 上线单是否开启审核
      },
      rules: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        environment_id: [{ required: true, message: '请选择环境', trigger: 'blur' }],
        repo_url: [{ required: true, message: '请输入git地址', trigger: 'blur' }],
        target_root: [{ required: true, message: '一般为webroot，不能为已存在目录', trigger: 'blur' }],
        target_releases: [{ required: true, message: '仓库存储每次发布的版本', trigger: 'blur' }],
        keep_version_num: [{ validator: checkKeepVersionNum, trigger: "blur" }],
        notice_hook: [{ validator: checkNoticeHook, trigger: "blur" }]
      },
      noticeTypeOptions: [
        { value: '', label: '无' },
        { value: 'dingding', label: '钉钉通知' },
        { value: 'email', label: '邮箱通知' }
      ],
      cmOptions1: {
        value: '',
        mode: "text/x-sh",
        theme: "default", // solarized light,base16-light,cobalt
        readOnly: false,
        tabSize: 2,
        lineNumbers: true,
        line: true,
        readOnly: false,
        extraKeys: cmExtraKeys
      },
      cmOptions2: {
        value: '',
        mode: "text/x-sh",
        theme: "default", // solarized light,base16-light,cobalt
        readOnly: false,
        tabSize: 2,
        lineNumbers: true,
        line: true,
        readOnly: false,
        extraKeys: cmExtraKeys
      },
      cmOptions3: {
        value: '',
        mode: "text/x-sh",
        theme: "default", // solarized light,base16-light,cobalt
        readOnly: false,
        tabSize: 2,
        lineNumbers: true,
        line: true,
        readOnly: false,
        extraKeys: cmExtraKeys
      },
      cmOptions4: {
        value: '',
        mode: "text/x-sh",
        theme: "default", // solarized light,base16-light,cobalt
        readOnly: false,
        tabSize: 2,
        lineNumbers: true,
        line: true,
        readOnly: false,
        extraKeys: cmExtraKeys
      },
      cmOptions5: {
        value: '',
        mode: "text/x-sh",
        theme: "default", // solarized light,base16-light,cobalt
        readOnly: false,
        tabSize: 2,
        lineNumbers: true,
        line: true,
        readOnly: false,
        extraKeys: cmExtraKeys
      },
      cmOptions6: {
        value: '',
        mode: "text/x-sh",
        theme: "default", // solarized light,base16-light,cobalt
        readOnly: false,
        tabSize: 2,
        lineNumbers: true,
        line: true,
        readOnly: false,
        extraKeys: cmExtraKeys
      }
    }
  },
  computed: {
    noticeTypeTitle: function() {
      switch(this.form.notice_type) {
        case '': return '无'
        case 'dingding': return '钉钉hook地址'
        case 'email': return '邮箱地址'
      }
    },
    noticeTypePlaceholder: function() {
      switch(this.form.notice_type) {
        case '': return ''
        case 'dingding': return '请输入钉钉hock地址，英文分号分隔'
        case 'email': return '请输入邮箱地址，英文分号分隔'
      }
    }
  },
  mounted() {
    const params = this.$route.params
    this.params.flag = params.flag
    this.params.data = params.data
    this.params.context = params.context
    this.isReadOnly = !(params.flag === 'create'|| params.flag === 'update')
    this.cmOptions1.readOnly = this.isReadOnly
    this.cmOptions2.readOnly = this.isReadOnly
    this.cmOptions3.readOnly = this.isReadOnly
    this.cmOptions4.readOnly = this.isReadOnly
    this.cmOptions5.readOnly = this.isReadOnly
    this.cmOptions6.readOnly = this.isReadOnly
    this.getProject()
    this.getEnvironment()
    this.getServer()
  },
  methods: {
    getProject() { // 获取当前项目信息
      if (this.params.flag=== 'update' || this.params.flag=== 'view') {
        getProject(this.params.data.id).then(response => {
          if (!response.data || response.data.code !== 0) {
            this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
            return
          }
          this.project = response.data.data
          this.form.name = this.project.name
          this.form.environment_id = this.project.environment_id
          this.form.repo_url = this.project.repo_url
          this.form.repo_mode = this.project.repo_mode
          this.form.server_ids = (this.project.server_ids && this.project.server_ids !== '') ? this.project.server_ids.split(',').map(Number) : []
          this.form.target_root = this.project.target_root
          this.form.target_releases = this.project.target_releases
          this.form.keep_version_num = (this.project.keep_version_num === '') ? 0 : this.project.keep_version_num
          this.form.excludes = this.project.excludes
          this.form.is_include = this.project.is_include
          this.form.task_vars = this.project.task_vars
          this.form.prev_deploy = this.project.prev_deploy
          this.form.post_deploy = this.project.post_deploy
          this.form.prev_release = this.project.prev_release
          this.form.post_release = this.project.post_release
          this.form.notice_type = this.project.notice_type
          this.form.notice_hook = (this.project.notice_type === '') ? '' : this.project.notice_hook
          this.form.task_audit = this.project.task_audit
        }).catch(error => {
          this.$message({ type: 'error', message: '请求数据失败!' });
        })
      }
    },
    handleBack() {  // 返回
      this.$router.replace({name:'WalleProject', params: this.params.context})
    },
    getEnvironment() { // 获取环境列表
      this.environment = []
      getEnvironment().then(response => {
        if (!response.data || response.data.code !== 0) {
          this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
          return
        }
        const data = response.data.data
        this.environment = data.list
      }).catch(error => {
        this.$message({ type: 'error', message: '请求环境列表异常!' });
      })
    },
    getServer() { // 获取服务主机列表
      this.server = []
      getServer(100, 1).then(response => {
        if (!response.data || response.data.code !== 0) {
          this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
          return
        }
        const list = response.data.data.list
        for(let i in list) {
          this.server.push({  
            key: list[i].id,
            label: list[i].name,
            disabled: false,
            data: list[i]
          })
        }
      }).catch(error => {
        this.$message({ type: 'error', message: '请求服务器列表产生异常!' });
      })
    },
    fullScreen(idx) { //脚本编辑全屏
      let cm 
      switch(idx) {
        case 1: cm = this.$refs.cmEditer1.codemirror; break;
        case 2: cm = this.$refs.cmEditer2.codemirror; break;
        case 3: cm = this.$refs.cmEditer3.codemirror; break;
        case 4: cm = this.$refs.cmEditer4.codemirror; break;
        case 5: cm = this.$refs.cmEditer5.codemirror; break;
        case 6: cm = this.$refs.cmEditer6.codemirror; break;
      }
      if (!cm.getOption('fullScreen')) {
        cm.setOption('fullScreen', true)
        cm.focus()
        cm.setCursor(cm.lineCount(), 0)
        const h = this.$createElement
        this.$notify({
          showClose: false,
          message: '按Esc键即可退出全屏，按F11键进行切换',
          onClick: function() {
            this.close()
          }
        })
      }
    },
    submitProject() { //提交修改、新建表单
      let valid = true
      valid = this.$refs.basicform.validate() && valid
      valid = this.$refs.serversform.validate() && valid
      valid = this.$refs.taskform.validate() && valid
      valid = this.$refs.notifyform.validate() && valid
      valid = this.$refs.auditform.validate() && valid
      if (!valid) {
        return false
      }
      if (this.form.server_ids.length === 0) {
        this.$message({ type: 'warning', message: '请选择项目发布的目标集群' })
        return false
      }
      // codemirror 双向绑定有问题
      this.form.excludes = this.$refs.cmEditer1.codemirror.getValue()
      this.form.task_vars = this.$refs.cmEditer2.codemirror.getValue()
      this.form.prev_deploy = this.$refs.cmEditer3.codemirror.getValue()
      this.form.post_deploy = this.$refs.cmEditer4.codemirror.getValue()
      this.form.prev_release = this.$refs.cmEditer5.codemirror.getValue()
      this.form.post_release = this.$refs.cmEditer6.codemirror.getValue()
      //
      let project = (this.params.flag === 'create') ? {} : this.project
      project.name = this.form.name
      project.environment_id = this.form.environment_id
      project.repo_url = this.form.repo_url
      project.repo_mode = this.form.repo_mode
      project.server_ids = this.form.server_ids.join(',')
      project.target_root = this.form.target_root
      project.target_releases = this.form.target_releases
      project.keep_version_num = this.form.keep_version_num
      project.excludes = this.form.excludes
      project.is_include = this.form.is_include
      project.task_vars = this.form.task_vars
      project.prev_deploy = this.form.prev_deploy
      project.post_deploy = this.form.post_deploy
      project.prev_release = this.form.prev_release
      project.post_release = this.form.post_release
      project.notice_type = this.form.notice_type
      project.notice_hook = this.form.notice_hook
      project.task_audit = this.form.task_audit
      if (this.params.flag === 'create') {
        project.status = 1
        project.space_id = this.$store.getters.space.current.id
        project.target_library = ""
        createProject(project).then(response => {
          if (!response.data || response.data.code !== 0) {
            this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
            return
          }
          this.$message({ type:'success', message:'新建成功!' })
          this.$refs.backbutton.click()
        }).catch(error => {
          this.$message({ type: 'error', message: '新建失败!' });
        })
      }
      else if (this.params.flag === 'update') {
        updateProject(project).then(response => {
          if (!response.data || response.data.code !== 0) {
            this.$message({ type:'error', message:(response.data && response.data.message) ? response.data.message:'请求数据异常！' })
            return
          }
          this.$message({ type:'success', message:'修改成功!' })
          this.$refs.backbutton.click()
        }).catch(error => {
          this.$message({ type: 'error', message: '修改失败!' });
        })
      }
    }
  }
}
</script>

<style scoped>
  .wl-project-edit {
    box-sizing: border-box;
    background: #fff;
    min-height: calc(100% - 40px);
    max-width: 1160px;
  }
  .wl-project-edit >>> label {
    font-weight: 500;
  }
  .wl-project-edit >>> .el-form-item__label {
    padding: 0px!important;
  }
  .wl-project-edit >>> .el-form-item {
    margin-bottom: 10px!important;
  }
  .wl-project-edit >>> .el-transfer-panel {
    width: 45.8333333333%
  }
  .wl-project-edit >>> .el-transfer__buttons {
    padding: 0px;
    width: 8.3333333333%;
  }
  .wl-project-edit >>> .el-transfer__button {
    display: block;
    margin: 0 auto;
    padding: 10px;
    border-radius: 50%;
    color: #fff;
    background-color: #409eff;
    font-size: 0;
  }
  .wl-project-edit >>> .el-transfer__button:first-child {
      margin-bottom: 10px;
  }
  .wl-project-edit >>> .el-icon-info {
    margin-left: 3px;
  }
  .wl-form-item {
    width: 100%;
  }
  .wl-back {
    color: #1890ff;
    font-size: 14px;
    /* margin-bottom: 15px; */
    cursor: pointer;
  }
  .wl-split {
    color: #1890ff;
    border-bottom: 1px solid #1890ff;
    margin-top: 15px;
    margin-bottom: 15px;
    line-height: 25px;
    font-size: 14px;
  }
  .wl-codemirror {
    border: 1px solid#C0C4CC;
  }
  .wl-project-edit >>> .CodeMirror { 
    height: 120px;
    line-height : 130%;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 12px;
  }
  .wl-project-edit__isRead >>> .CodeMirror {
    background: #f5f7fa;
  }
  .wl-task-form >>> .el-form-item--small.el-form-item {
    position: relative;
  }
  .wl-project-edit >>> .CodeMirror-fullscreen {
    position: fixed!important;
    top: 0; left: 0; right: 0; bottom: 0;
    height: auto;
    z-index: 1001;
  }
  .wl-fullscreen {
    position: absolute;
    top: 0;
    right: 0;
    color: #1890ff;
    cursor: pointer;
  }
  .wl-project-edit__include {
    margin-left: 40px;
  }
  .wl-project-edit__checkout {
    height: 100%;
    width: 100%;
    display: inline-block;
    text-align: center;
    padding-top: 60px;
    box-sizing: border-box;
    color: #606266;
    font-size : 12px;
  }
  .wl-icon-gitlab {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .wl-popover p {
    line-height: 8px;
  }
  .wl-popover span {
    color: #1890ff;
  }
  .wl-popover .var {
    line-height: 8px;
    font-size: 8px;
  }
  .wl-popover .indent {
    padding-left: 10px;
  }
  .wl-popover .shell {
    line-height: 8px;
    font-size: 8px;
    color: #1890ff;
  }
</style>